//创建一个对象
window.Event = new class {
    constructor() {
        this.vue = new Vue()
    }

    fire(event, data = null) {
        this.vue.$emit(event, data)
    }

    listen(event, callback) {
        this.vue.$on(event, callback)
    }

}


Vue.component('coupon', {

    //vue语法需要在一个可识别的root node里面执行,所以需要包一层 div
    template: `
        
         <input placeholder="请输入代金券" @blur="onCouponApplied">  </input>
        
        `,

    methods: {

        onCouponApplied() {
            //通过event对象发射事件
            Event.fire('applied');
        }

    }

});



new Vue({

    el: '#root',

    data: {
        couponIsUsed: false
    },



    //一旦创建就监听事件
    created() {

        //监听applied事件
        Event.listen('applied', () => {
            alert('啊哈哈哈哈');
            this.couponIsUsed = true;
        })
    }

});